<template>
	<view class="store">
		<view class="store__title">{{$t('trade.hold')}}（{{posRecords.length}}）</view>
		<view class="store__header">
			<view class="header__item">{{$t('stock.name')}}<br/>{{$t('stock.name1')}}</view>
			<view class="header__item"><br/>{{$t('trade.total')}}</view>
			<view class="header__item">{{$t('trade.current')}}<br/>{{$t('trade.cost')}}</view>
			<view class="header__item">{{$t('trade.value1')}}<br/>{{$t('trade.value')}}</view>
		</view>
		<view class="store__list" v-if="posRecords.length">
			<view class="store__item" v-for="(item, index) in posRecords" :key="index" @click="itemClick(item)">
				<view class="item__name">
					<view class="name__text">{{item.product.name}}</view>
					<view class="name__info">
						<image :src="item.product.shichang | formatIcon" mode="widthFix" 
						class="info__icon"></image>
						<!-- <text class="info__code" v-if="item.product.category_id === 3">{{item.product.shuzidaima.toString().padStart(5, '0')}}</text>
						 --><text class="info__code" >{{item.zimudaima}}</text>
					</view>
				</view>
				<view class="item__usable">
					<view class="usable__num">{{item.shuliang}}</view>
					<text class="usable__num">{{item.shuliang}}</text>
				</view>
				<view class="item__cost">
					<view class="cost__increa" :class="parseFloat(item.yisun) > 0 ? 'price__total_red' : 'price__total_green' ">{{item.product.price }}</view>
					<view class="cost__num">{{item.price }}</view>
				</view>
				<view class="item__price">
					<text class="price__num" :class="parseFloat(item.yisun) > 0 ? 'price__total_red' : 'price__total_green' ">{{item.yisun}}</text>
					<text class="price__total">{{item.yingkui}}</text>
				</view>
			</view>
		</view>
		<emptyTips v-else></emptyTips>
	</view>
</template>

<script>
	import emptyTips from '@/components/common/emptyTips.vue'
	export default{
		components:{
			emptyTips
		},
		data(){
			return {}
		},
		props:{
			posRecords:{
				type:Array,
				default:()=>([])
			}
		},

		filters:{
			formatIncreament(item){
				let {shizhi=0, benjin=1} = item
				let num = (Number(shizhi) - Number(benjin))/benjin*100 || 0
				return num.toFixed(2)
			},
			formatVal(val){
				let value = Number(val)
				return value >= 1000 ? (value / 1000).toFixed(2) + "K" : value
			},
			
			// 处理图片格式
			formatIcon(name){
				let obj = {
					JPY:"KRN",
					USD:"US",
					GBP:"UK"
				}
				return `/static/icons/${obj[name]}.png`
			}
		},
		methods:{
			itemClick(info){
				uni.navigateTo({
					url:`/pages/account/stockDetail?id=${info.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store{
		margin-top: 50rpx;
		.store__title{
			font-size: 36rpx;
			font-weight: 800;
			color: #fff;
			@include flexRowAlign(center);
		}
		.store__header{
			margin-top: 20rpx;
			@include flexRowAlign(space-between);
			height: 64rpx;
			       text-align: center;
			      
			       overflow: hidden;
			       text-overflow: ellipsis;
			       white-space: nowrap;
			.header__item{
				@include flexRowAlign(center);
				font-size: 28rpx;
				overflow-x: auto;
				color: #999999;
				text-align: center;
				 width: 190rpx;
				.item__icon{
					width: 24rpx;
					height: 28rpx;
					margin-left: 4rpx;
				}
				&:first-child{
					justify-content: flex-start;
				}
				&:last-child{
					width: 190rpx;
				}
			}
		}
		.store__item{
			@include flexRowAlign(space-between);
			height: 130rpx;
			// border-top: 1rpx solid #EEEEEE;
			.item__name{
				@include flexCenter(column);
				align-items: flex-start;
				width: 180rpx;
				.name__text{
					font-size: 28rpx;
					color: #fff;
					width: 100%;
					@include textOver();
					width: 180rpx;
				}
				.name__info{
					@include flexRowAlign()
					margin-top: 10rpx;
					.info__icon{
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
					}
					.info__code{
						font-size: 20rpx;
						font-weight: 500;
						color: #fff;
						margin-left: 10rpx;
					}
				}
			}
			.item__usable{
				width: 160rpx;
				@include flexCenter(column);
				font-size: 26rpx;
				color: #fff;
				.usable__num{
					&:last-child{
						margin-top: 10rpx;
					}
				}
			}
			.price__total_green{
				color: #2DC065;
			}
			.price__total_red{
				color: red;
			}
			.item__price{
				@include flexCenter(column);
				width: 190rpx;
				.price__num{
					font-size: 26rpx;
					font-weight: 800;
					color: #2DC065;
				}
				.price__total{
					font-size: 26rpx;
					color: #fff;
					margin-top: 10rpx;
				}
				.price__total_green{
					color: #2DC065;
				}
				.price__total_red{
					color: red;
				}
			}
			.item__cost{
				@include flexCenter(column);
				width: 180rpx;
				.cost__increa{
					font-size: 26rpx;
					// color: #2DC065;
				}
				.cost__num{
					font-size: 26rpx;
					color: #fff;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>